<template>
  <div class="app">
    <!-- 头部 -->
    <header>
      <van-nav-bar
        :title="city"
        right-text="切换城市"
        left-arrow
        @click-left="$router.push('/cityList')"
        @click-right="$router.push('/cityList')"
      />
    </header>
    <div class="content">
      <!-- 输入框 -->
      <div class="input">
        <van-cell-group>
          <van-field v-model="value" placeholder="输入学校 商务楼 地址" />
        </van-cell-group>
        <!-- 按钮 -->
        <van-button type="info" block @click="search">提交</van-button>
        <van-cell-group>
          <van-cell
            v-for="(item, index) in addressList"
            :title="item.name"
            :label="item.address"
            :key="index"
            @click="toIndex(item, item)"
          />
        </van-cell-group>
      </div>
      <p class="search">搜索历史</p>
      <van-cell-group>
        <van-cell
          v-for="(item, index) in searchHistory"
          :title="item.name"
          :label="item.address"
          :key="index"
          @click="toIndex(item)"
        />
      </van-cell-group>
      <div class="clear" @click="clear">清空所有</div>
    </div>
  </div>
</template>

<script>
import { location } from "../api/city";
export default {
  data() {
    return {
      value: "",
      addressList: [],
      searchHistory: [],
      city: this.$route.query.name,
      id: this.$route.query.id,
    };
  },
  // 历史搜索记录显示
  created() {
    if (localStorage.getItem("address")) {
      this.searchHistory = JSON.parse(localStorage.getItem("address"));
    }
  },
  methods: {
    // 提交,查询具体地址
    search() {
      if (!this.value) {
        this.$toast.fail("地址不能为空");
        return;
      }
      // 发请求,获取相关数据
      location({ city_id: this.id, keyword: this.value }).then((res) => {
        console.log(48, res);
        this.addressList = res.data;
      });
    },
    // 本地存储和跳转到首页
    toIndex(val1, val2) {
      // 先获取本地缓存中的地址
      let address = JSON.parse(localStorage.getItem("address")) || [];
      // 像本地缓存中添加地址
      address.push({ name: val2.name, address: val2.address });
      // 再次存储起来
      localStorage.setItem("address", JSON.stringify(address));
      // 跳转到首页
      this.$router.push({
        path: "/index",
        qurey: {
          val1,
        },
      });
    },
    // 清空所有
    clear() {
      this.searchHistory = [];
      localStorage.removeItem("address");
    },
  },
};
</script>

<style lang="less" scoped>
.app {
  height: 100vh;
  background-color: #f5f5f5;
  /deep/.van-nav-bar {
    background-color: #3190e8;
    margin-bottom: 10px;
    .van-icon,
    .van-nav-bar__title,
    .van-nav-bar__text {
      color: #fff;
    }
    .van-nav-bar__title {
      font-size: 18px;
    }
  }
  .content {
    .input {
      padding: 0px 20px 10px;
      background-color: #fff;
      .van-cell {
        padding: 10px 0;
      }
      /deep/.van-field__control {
        height: 36px;
        outline: 1px solid #ccc;
        padding-left: 5px;
      }
    }
    .search {
      margin: 0;
      padding: 0;
      margin-left: 10px;
      font-size: 14px;
    }

    .van-cell {
      font-size: 16px;
      border-bottom: 1px solid #eee;
    }
    .van-cell__label {
      font-size: 14px;
    }
    .clear {
      height: 50px;
      line-height: 50px;
      font-size: 16px;
      text-align: center;
      background-color: #fff;
    }
  }
}
</style>